<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <button onclick="doAjaxStart()">ajax</button>
        <span id="result"></span>


    </div>

<script>
    function doAjaxStart(){
        debugger//在浏览器控制台打开状态下断点才会生效
        //1、create xhr对象（此对象时ajax应用的入口对象）
        let xhr = new XMLHttpRequest();
        //2、设置状态监听（监听客户端与服务端的通讯过程）
        xhr.onreadystatechange=function () {//此函数在客户端与服务端的通讯状态发生变化时执行
            //4表示服务端响应到客户端结果，客户端已接收完成。200表示服务端处理请求的过程是ok的
            if (xhr.readyState==4&&xhr.status==200){
                let result = xhr.responseText;//获取服务端响应到客户端的文本信息
                document.getElementById("result").innerHTML=result;
            }
        }
        //3、建立一个与服务端指定url的连接
        xhr.open("get","http://localhost:8080/doAjaxStart",true);//true异步请求
        //4、发送
        xhr.send(null);//这个请求交给谁去发送？（ajax引擎）
        //如果上面的请求是异步执行完send后就执行。同步会阻塞
        console.log("main===")
    }
</script>
</body>
</html>